<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./高速综合管控大数据平台.css" />
</head>

<body>
    <div class="Top"></div>
    <div class="Box">
        <div class="Left">
            <div class="Gbox">
                <p class="Top">
                    <span>交通流量</span>
                </p>
                <div id="ZXT"></div>
            </div>
            <div class="Gbox" style="margin: 10px 0">
                <p class="Top">
                    <span>交通工具流量</span>
                </p>
                <div id="XT">

                </div>
            </div>
            <div class="Gbox">
                <p class="Top">
                    <span>收费站车流量</span>
                </p>
                <div class="Tab">
                    <table>
                        <thead>
                            <tr>
                                <td>运输方式</td>
                                <td>客运量</td>
                                <td>货运量</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="t1">
                                    <img src="./images/ksh35.png" alt="">
                                    公路运输
                                </td>
                                <td class="t2" style="color:#05c4a5 ;">4347.2万人</td>
                                <td class="t2" style="color:#cdbf11 ;">4347.2万人</td>
                            </tr>
                            <tr>
                                <td class="t1">
                                    <img src="./images/ksh35.png" alt="">
                                    公路运输
                                </td>
                                <td class="t2" style="color:#05c4a5 ;">4347.2万人</td>
                                <td class="t2" style="color:#cdbf11 ;">4347.2万人</td>
                            </tr>
                     
                            <tr>
                                <td class="t1">
                                    <img src="./images/ksh35.png" alt="">
                                    公路运输
                                </td>
                                <td class="t2" style="color:#05c4a5 ;">4347.2万人</td>
                                <td class="t2" style="color:#cdbf11 ;">4347.2万人</td>
                            </tr> 
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="Moddle">
            <div class="Moddle-top">
                <div class="top-One">
                    <p>当前警情数(起)</p>
                    <div class="Small">
                        <h1 style="color:#19bcde ;">67</h1>
                        <div>
                            <p class="s s1">日环比+3%</p>
                            <p class="s s2">周环比-2%</p>
                        </div>
                    </div>
                </div>
                <div class="top-Two">
                    <p>区域拥堵指数</p>
                    <div class="Small">
                        <h1 style="color:#19bcde ;">1.4</h1>
                        <div>
                            <p class="s">缓行</p>
                            <p class="s">平均车速120KM/H</p>
                        </div>
                    </div>
                </div>
                <div class="top-One">
                    <p>当前警情数(起)</p>
                    <div class="Small">
                        <h1 style="color:#19bcde ;">99</h1>
                        <div>
                            <p class="s s1">日环比+3%</p>
                            <p class="s s2">周环比-2%</p>
                        </div>
                    </div>
                </div>
                <div class="top-Two">
                    <p>当前警情数(起)</p>
                    <div class="Small">
                        <h1 style="color:#19bcde ;">7421</h1>
                        <div>
                            <p class="s s2">月环比-2%</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="Map-box">
                <div id="BigMap">

                </div>
                <div class="Bot">
                    <div class="Bots">
                        <div class="Bleft">
                            <h3>今日实时收费</h3>
                            <p style="font-size: 13px; margin: 5px 0; ">全省数据</p>
                           <div class="table">
                         
                                <span>大网北</span>
                                <span>大同南</span>
                                <span>朔州</span>
                                <span>吕梁北</span>
                                <span>吕梁南</span>
                                <span>太原</span>
                                <span style="color:#04b3c8 ;">晋中</span>
                                <span>太旧</span>
                                <span>长治</span>
                           
                           </div>
    
                        </div>
                        <div class="Bright" id="Quan">
                            
                        </div>
                    </div>
                

                </div>
            </div>
        </div>
        <div class="Right">
            <div class="Gbox">
                <p class="Top">
                    <span>末月发生事件</span>
                </p>
                <div id="LeiD">

                </div>
            </div>
            <div class="Gbox">
                <p class="Top">
                    <span>收费站收费量</span>
                </p>
                <div class="Biao">
                   <div class="hang" style="color: #01b5f2;">
                    <p>小型车</p>
                    <p>中型车</p>
                    <p>大型车</p>
                   </div>
                   <div class="hang" style="color: #fff; margin: 5px 0; border-top: 1px dashed #fff;border-bottom: 1px dashed #fff;">
                    <p>2486万</p>
                    <p>2486万</p>
                    <p>2486万</p>
                   </div>
                   <div class="hang" style="color: #fff; ">
                    <p>2486万</p>
                    <p>2486万</p>
                    <p>2486万</p>
                   </div>
                   <div class="hang" style="color: #fff; margin: 5px 0; border-top: 1px dashed #fff;border-bottom: 1px dashed #fff;">
                    <p>2486万</p>
                    <p>2486万</p>
                    <p>2486万</p>
                   </div>
                   <div class="hang" style="color: #fff; border-bottom: 1px solid #fff;"">
                    <p>2486万</p>
                    <p>2486万</p>
                    <p>2486万</p>
                   </div>
                                  
                             
                
                </div>
                <div id="ReLi">

                </div>
            </div>
            <div class="Gbox" style="margin-top: 5px;">
                <p class="Top">
                    <span>收费站收费排行</span>
                </p>
                <div id="Ren">

                </div>
            </div>
        </div>
</body>
<script src="./echarts.min.js"></script>
<script type="module">
    import china from './中国地图.js'
    LeftOne();
    LeftTwo()
    ModdlesOne()
    ModdleTwo()
    RightOne()
    RightTwo()
    RightThere()
    function LeftOne() {
        var myChart = echarts.init(document.getElementById("ZXT"));
        let chartData = {
            xAxisData: [
                "",
                "2015",
                "2016",
                "2017",
                "2018",
                "",
            ],
            finishNum: [28, 51, 43, 43, 48, 15],
            unFinishNum: [28, 39, 36, 36, 31, 21],
            finishRate: [50, 56, 54, 54, 60, 41],
        };
        const option = {
            color: ["#009883", "#e66922", "#F4DF58"],
            tooltip: {
                confine: true,
            },
            grid: {
                left: "2%",
                right: "4%",
                bottom: "10%",
                top: "20%",
                containLabel: true,
            },
            legend: {
                left: "right",

                textStyle: {
                    fontSize: 12,
                    color: "#6A93B9",
                    height: 8,
                },
                data: ["高速公路", "城镇公路", "环比", "同比"],
            },
            xAxis: {
                type: "category",
                data: ["",
                    "2015",
                    "2016",
                    "2017",
                    "2018",
                    "",],
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,0.45)",
                    },
                },
                axisLabel: {
                    fontSize: 12,
                    color: "#6A93B9",
                },
                axisTick: {
                    show: false,
                },
            },
            yAxis: [
                {
                    type: "value",
                    min: 0,
                    minInterval: 1,
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.15)",
                            // type: 'dashed', // dotted 虚线
                        },
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: "#6A93B9",
                        fontFamily: "Bebas",
                    },
                },
                {
                    type: "value",
                    min: 0,
                    minInterval: 1,
                    splitArea: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.15)",
                            // type: 'dashed', // dotted 虚线
                        },
                    },
                    axisLabel: {
                        fontSize: 12,
                        color: "#6A93B9",
                        fontFamily: "Bebas",
                    },
                },
            ],
            series: [
                {
                    type: "bar",
                    barWidth: 10,

                    name: "高速公路",
                    data: chartData.finishNum,
                },
                {
                    type: "bar",
                    barWidth: 10,

                    name: "城镇公路",
                    data: chartData.unFinishNum,
                },
                {
                    type: "line",
                    yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: false, // 平滑曲线显示
                    symbol: "circle", // 标记的图形为实心圆
                    symbolSize: 8, // 标记的大小
                    icon: 'circle',
                    name: "环比",
                    data: chartData.unFinishNum,
                },
                {
                    type: "line",
                    yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    smooth: false, // 平滑曲线显示
                    symbol: "circle", // 标记的图形为实心圆
                    symbolSize: 8, // 标记的大小
                    icon: 'circle',

                    name: "同比",
                    data: chartData.finishNum,
                },
            ],
        };

        myChart.setOption(option);
    }
    function LeftTwo() {

        var myChart = echarts.init(document.getElementById('XT'));
        const backgroundColor = '#101736';
        const color = ['#7caa20', '#016db0', '#b02e37',]; //2个以上的series就需要用到color数组
  
        const legend = {
            //data，就是取得每个series里面的name属性。
            orient: 'horizontal',
            icon: 'rect', //图例形状
            padding: 0,
            top: 35,
            right: 40,
            itemWidth: 14, //小圆点宽度
            itemHeight: 5, // 小圆点高度
            itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
            textStyle: {
                fontSize: 14,
                color: '#ffffff',
            },
        };
        const tooltip = {
            show: true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        };
        let seriesData = [
            { name: '小型车', data: [120, 132, 101, 134, 90, 230, 210,210,210,210,210,210] },
            { name: '中型车', data: [220, 182, 191, 234, 290, 330, 310,210,210,210,210,210] },
            { name: '大型车', data: [150, 232, 201, 154, 190, 330, 410,210,210,210,210,110] },
          
        ];
        const commonConfigFn = (index) => {
            return {
                type: 'line',
                smooth: true,
                symbol: 'emptyCircle', //空心小圆点。线条小圆点形状
                symbolSize: 6, //小圆点大小
                itemStyle: {
                    //还是小圆点设置
                },

                label: {
                    show: false, //不显示小圆点上的label文字
                },
                lineStyle: {
                    width: 1, //线条设置

                },

                areaStyle: {
                    //填充线条下面的面积区域颜色。（areaStyle只是锦上添花）
                    opacity: 0.2,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: color[index], // 上处的颜色
                            },
                            {
                                offset: 1,
                                color: 'transparent', // 下处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    },
                },
            };
        };

        seriesData = seriesData.map((item, index) => ({ ...item, ...commonConfigFn(index) }));
        const option = {
            backgroundColor,
            color,
            tooltip,
            legend,
            grid: {
                top: '20%',
                left: '3%',
                right: '4%',
                bottom: '5%',
                containLabel: true,
            },

            xAxis: {
                show: true, //显示x轴+x轴label文字
                type: 'category',
                boundaryGap: false, //从Y轴出发，这个false很好的
                axisLine: {
                    show: true, //显示x坐标轴轴线
                    lineStyle: {
                        color: 'rgba(255,255,255,.4)',
                    },
                },
                axisTick: {
                    show: false, //不显示x坐标1cm刻度
                },
                axisLabel: {
                    color: '#ffffff', //x轴label文字颜色
                },
                splitLine: {
                    show: false, //不显示grid竖向分割线
                },

                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#ffffff',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.4)',
                    },
                },
                splitLine: {
                    show: false, //不显示grid水平分割线
                },
            },

            series: seriesData,
        };


        myChart.setOption(option);
    }
    function ModdlesOne(){

var myChart = echarts.init(document.getElementById('BigMap'));
var geoGpsMap = [125.8154, 44.2584];
var categoryData = [];
var barData = [];
var t = 1;//流入流出控制
var r = 1;//右侧流入流出文字控制
var geoCoordMap = {
    "江苏": [118.8062, 31.9208],
    '黑龙江': [127.9688, 45.368],
    '内蒙古': [110.3467, 41.4899],
    "吉林": [125.8154, 44.2584],
    '北京市': [116.4551, 40.2539],
    "辽宁": [123.1238, 42.1216],
    "河北": [114.4995, 38.1006],
    "天津": [117.4219, 39.4189],
    "山西": [112.3352, 37.9413],
    "陕西": [109.1162, 34.2004],
    "甘肃": [103.5901, 36.3043],
    "宁夏": [106.3586, 38.1775],
    "青海": [101.4038, 36.8207],
    "新疆": [87.9236, 43.5883],
    "四川": [103.9526, 30.7617],
    "重庆": [108.384366, 30.439702],
    "山东": [117.1582, 36.8701],
    "河南": [113.4668, 34.6234],
    "安徽": [117.29, 32.0581],
    "湖北": [114.3896, 30.6628],
    "浙江": [119.5313, 29.8773],
    "福建": [119.4543, 25.9222],
    "江西": [116.0046, 28.6633],
    "湖南": [113.0823, 28.2568],
    "贵州": [106.6992, 26.7682],
    "云南": [102.9199, 25.4663],
    "广东": [113.12244, 23.009505],
    "广西": [108.479, 23.1152],
    "海南": [110.3893, 19.8516],
    '上海': [121.4648, 31.2891],
    "西藏": [91.11, 29.97],
};

var d1 = {
'江苏':10041,
'黑龙江':4093,
'内蒙古':1157,
'吉林':4903,
'北京市':2667,
'辽宁':8331,
'河北':23727,
'天津':681,
'山西':5352,
'陕西':38,
'甘肃':77,
'宁夏':65,
'青海':10,
'新疆':22000,
'四川':309,
'重庆':77,
'山东':21666,
'河南':15717,
'安徽':15671,
'湖北':3714,
'浙江':3141,
'福建':955,
'江西':4978,
'湖南':778,
'贵州':33,
'云南':149,
'广东':1124,
'广西':125,
'海南':7,
'上海':2155,
'西藏':0

};

var d2 = {
'江苏':159,
'黑龙江':5,
'内蒙古':54,
'吉林':10,
'北京市':0,
'辽宁':0,
'河北':1679,
'天津':1,
'山西':2698,
'陕西':1744,
'甘肃':362,
'宁夏':429,
'青海':122,
'新疆':731,
'四川':3925,
'重庆':1480,
'山东':79,
'河南':1017,
'安徽':208,
'湖北':1209,
'浙江':1418,
'福建':1237,
'江西':1004,
'湖南':1511,
'贵州':345,
'云南':1429,
'广东':2242,
'广西':2271,
'海南':59,
'上海':8,
   '西藏':0
};

var d3 = {
'江苏':11788,
'黑龙江':1944,
'内蒙古':2954,
'吉林':3482,
'北京市':1808,
'辽宁':5488,
'河北':27035,
'天津':2270,
'山西':13623,
'陕西':4221,
'甘肃':754,
'宁夏':1783,
'青海':91,
'新疆':1907,
'四川':4905,
'重庆':1420,
'山东':39781,
'河南':16154,
'安徽':7914,
'湖北':6802,
'浙江':5812,
'福建':3345,
'江西':4996,
'湖南':5627,
'贵州':1504,
'云南':2725,
'广东':6339,
'广西':1009,
'海南':0,
'上海':1988,

'西藏':0

};

var d4 = {
'江苏':10041,
'黑龙江':4093,
'内蒙古':1157,
'吉林':4903,
'北京市':2667,
'辽宁':8331,
'河北':23727,
'天津':681,
'山西':5352,
'陕西':38,
'甘肃':77,
'宁夏':65,
'青海':10,
'新疆':193,
'四川':309,
'重庆':77,
'山东':21666,
'河南':15717,
'安徽':15671,
'湖北':3714,
'浙江':3141,
'福建':955,
'江西':4978,
'湖南':778,
'贵州':33,
'云南':149,
'广东':1124,
'广西':125,
'海南':7,
'上海':2155,
'西藏':0
};

var d5 = {
'江苏':159,
'黑龙江':5,
'内蒙古':54,
'吉林':10,
'北京市':0,
'辽宁':0,
'河北':1679,
'天津':1,
'山西':2698,
'陕西':1744,
'甘肃':362,
'宁夏':429,
'青海':122,
'新疆':731,
'四川':3925,
'重庆':1480,
'山东':79,
'河南':1017,
'安徽':208,
'湖北':1209,
'浙江':1418,
'福建':1237,
'江西':1004,
'湖南':1511,
'贵州':345,
'云南':1429,
'广东':2242,
'广西':2271,
'海南':59,
'上海':8,
'西藏':0

};

var d6 = {
'江苏':11788,
'黑龙江':1944,
'内蒙古':2954,
'吉林':3482,
'北京市':1808,
'辽宁':5488,
'河北':27035,
'天津':2270,
'山西':13623,
'陕西':4221,
'甘肃':754,
'宁夏':1783,
'青海':91,
'新疆':1907,
'四川':4905,
'重庆':1420,
'山东':39781,
'河南':16154,
'安徽':7914,
'湖北':6802,
'浙江':5812,
'福建':3345,
'江西':4996,
'湖南':5627,
'贵州':1504,
'云南':2725,
'广东':6339,
'广西':1009,
'海南':0,
'上海':1988,
'西藏':0
};
var year = ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06"];
    var mapData = [
        [],
        [],
        [],
        [],
        [],
        [],
    ];
var colors = 
    ["#1DE9B6", "#EEDD78", "#32C5E9", "#FFDB5C", "#37A2DA", "#04B9FF"];
var colorIndex = 0;


/*柱子Y名称*/
var categoryData = [];
var barData = [];

for (var key in geoCoordMap) {
    mapData[0].push({
        "year": '2020-01',
        "name": key,
        "value": d1[key]/100,
        "value1": d1[key]/100,
    });
    mapData[1].push({
        "year": '2020-02',
        "name": key,
        "value": d2[key]/100,
        "value1": d2[key]/100,
    });
    mapData[2].push({
        "year": '2020-03',
        "name": key,
        "value": d3[key]/100,
        "value1": d3[key]/100,
    });
    mapData[3].push({
        "year": '2020-04',
        "name": key,
        "value": d4[key]/100,
        "value1": d4[key]/100,
    });
    mapData[4].push({
        "year": '2020-05',
        "name": key,
        "value": d5[key]/100,
        "value1": d5[key]/100,
    });
    mapData[5].push({
        "year": '2020-06',
        "name": key,
        "value": d6[key]/100,
        "value1": d6[key]/100,
    });
}

for (var i = 0; i < mapData.length; i++) {
mapData[i].sort(function sortNumber(a,b){return a.value-b.value});
    barData.push([]);
    categoryData.push([]);
    for (var j = 0; j < mapData[i].length; j++) {
        barData[i].push(mapData[i][j].value1);
        categoryData[i].push(mapData[i][j].name);
    }
}

    echarts.registerMap('china',china);
    var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

    var convertToLineData = function(data, gps) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var toCoord = geoCoordMap[dataItem.name];
            var fromCoord = gps; //郑州
            //  var toCoord = geoGps[Math.random()*3]; 
            if (fromCoord && toCoord) {
                if(t==1){
                    res.push([{
                    coord: toCoord,
                     },{
                    coord: fromCoord,
                    value: dataItem.value
                     }]);
                }else{
                   res.push([{
                        coord: fromCoord,
                        value: dataItem.value
                    },{
                    coord: toCoord,
                    }]); 
                }
                
            }
        }
        if(t==0){
            t=1;
        }else{
            t=0;
        }
        return res;
    };

    const option= {
        timeline: {
            data: year,
            axisType: 'category',
            autoPlay: true,
            playInterval: 5000,
            left: '10%',
            right: '10%',
            bottom: '3%',
            width: '80%',
            //  height: null,
            label: {
                normal: {
                    textStyle: {
                        color: '#ddd'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            symbolSize: 10,
            lineStyle: {
                color: '#555'
            },
            checkpointStyle: {
                borderColor: '#777',
                borderWidth: 2
            },
            controlStyle: {
                showNextBtn: true,
                showPrevBtn: true,
                normal: {
                    color: '#666',
                    borderColor: '#666'
                },
                emphasis: {
                    color: '#aaa',
                    borderColor: '#aaa'
                }
            },

        },
        // 特效颜色
        baseOption: {

            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicInOut',
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',
            grid: {
                right: '2%',
                top: '10%',
                bottom: '10%',
                width: '18%'
            },
            tooltip: {
                trigger: 'axis', // hover触发器
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                    shadowStyle: {
                        color: 'rgba(150,150,150,0.1)' //hover颜色
                    }
                }
            },
      
            geo: {
                show: true,
                map: 'china',
                roam: true,
                zoom: 1.5,
                center: [113.83531246, 34.0267395887],
                label: {
                    show:false,
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#03479e',
                        borderWidth: 1,
                        areaColor: '#07163b',
                        shadowOffsetX: -2,
                        shadowOffsetY: 2,
                        shadowBlur: 10
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                }
            },
        },
        options: []

    };
    
    for (var n = 0; n < year.length; n++) {
        // var statistic_name = "各省"+(r==1 ? "流入":"流出")+"流量";
        option.options.push({
            
            
            title:
            [{
                     text: '出行服务+大数据',
                     subtext:'东海省交通大数据分析平台',
                     //subtext: '   ',
                     left: '0%',
                     top: '1%',
                     textStyle: {
                         color: '#fff',
                        fontSize: 25
                     }
                },
            
            ],
            xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 1,
                    textStyle: {
                        color: '#aaa'
                    }
                },
            },
            yAxis: {
                type: 'category',
                //  name: 'TOP 20',
                nameGap: 16,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#ddd'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#ddd'
                    }
                },
                data: categoryData[n]
            },
            
            series: [
                //未知作用
                {
                    //文字和标志
                    name: 'light',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(mapData[n]),
                    symbolSize: function(val) {
                        return 6;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors[n]
                        }
                    }
                },
                //地图？
                {
                    type: 'map',
                    map: 'china',
                    geoIndex: 0,
                    aspectScale: 1, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#FFFFFF',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: mapData
                },
                //地图点的动画效果
                {
                    //  name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(mapData[n].sort(function(a, b) {
                        return b.value - a.value;
                    }).slice(0, 20)),
                    symbolSize: function(val) {
                        return 5;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: colors[n],
                            shadowBlur: 10,
                            shadowColor: colors[n]
                        }
                    },
                    zlevel: 1
                },
                //地图线的动画效果
                {
                    type: 'lines',
                    zlevel: 2,
                    effect: {
                        show: true,
                        period: 5, //箭头指向速度，值越小速度越快
                        trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                        symbol: 'arrow', //箭头图标
                        symbolSize: 6, //图标大小
                    },
                    lineStyle: {
                        normal: {
                            color: colors[n],
                            width: 1, //尾迹线条宽度
                            opacity: 0.2, //尾迹线条透明度
                            curveness: .3 //尾迹线条曲直度
                        }
                    },
                    data: convertToLineData(mapData[n], geoGpsMap)
                },
          
            ]
        });
      
    }

      myChart.setOption(option);
}
    function ModdleTwo(){

var myChart = echarts.init(document.getElementById('Quan'));
var dataStyle = {
    normal: {
        label: {
            show: false
        },
        labelLine: {
            show: false
        },
        shadowBlur: 0,
        shadowColor: '#203665'
    }
};
 const option = {
    // backgroundColor: "#20263f",
    series: [{
        name: '第一个圆环',
        type: 'pie',
        clockWise: false,
        radius: ['100%', '80%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['15%', '50%'],
        data: [{
            value: 25,
            label: {
                normal: {
                    rich: {
                        a: {
                            color: '#3a7ad5',
                            align: 'center',
                            fontSize: 20,
                            fontWeight: "bold"
                        },
                        b: {
                            color: '#fff',
                            align: 'center',
                            fontSize: 16
                        }
                    },
                    formatter: function(params){
                        return '车辆总数'
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '14',
                        fontWeight: 'normal',
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#205af7',
                        },
                        {
                            offset: 1,
                            color: '#61dcf8',
                        },
                    ]),
                    shadowColor: '#2c6cc4',
                    shadowBlur: 0
                }
            }
        }, {
            value: 75,
            name: 'invisible',
            itemStyle: {
                normal: {
                    color: '#24375c'
                },
                emphasis: {
                    color: '#24375c'
                }
            }
        }]
    }, {
        name: '第二个圆环',
        type: 'pie',
        clockWise: false,
        radius: ['100%', '80%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['50%', '50%'],
        data: [{
            value: 50,
            label: {
                normal: {
                    rich: {
                        a: {
                            color: '#d03e93',
                            align: 'center',
                            fontSize: 20,
                            fontWeight: "bold"
                        },
                        b: {
                            color: '#fff',
                            align: 'center',
                            fontSize: 16
                        }
                    },
                    formatter: function(params){
                        return "今日上线";
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '14',
                        fontWeight: 'normal',
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#04de97',
                        },
                        {
                            offset: 1,
                            color: '#1dd6be',
                        },
                    ]),
                    shadowColor: '#ef45ac',
                    shadowBlur: 0
                }
            }
        }, {
            value: 50,
            name: 'invisible',
            itemStyle: {
                normal: {
                    color: '#412a4e'
                },
                emphasis: {
                    color: '#412a4e'
                }
            }
        }]
    }, {
        name: '第三个圆环',
        type: 'pie',
        clockWise: false,
        radius: ['100%', '80%'],
        itemStyle: dataStyle,
        hoverAnimation: false,
        center: ['85%', '50%'],
        data: [{
            value: 75,
            label: {
                normal: {
                    rich: {
                        // 中间的字
                        a: {
                            color: '#603dd0',
                            align: 'center',
                            fontSize: 20,
                            fontWeight: "bold"
                        },
                        // 上下两个字
                        b: {
                            color: '#fff',
                            align: 'center',
                            fontSize: 16
                        }
                    },
                    formatter: function(params){
                        return "今日报警";
                    },
                    position: 'center',
                    show: true,
                    textStyle: {
                        fontSize: '14',
                        fontWeight: 'normal',
                        color: '#fff'
                    }
                }
            },
            itemStyle: {
                normal: {
                   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: '#e15b05',
                        },
                        {
                            offset: 1,
                            color: '#d3910c',
                        },
                    ]),
                    shadowColor: '#613fd1',
                    shadowBlur: 0
                }
            }
        }, {
            value: 25,
            name: 'invisible',
            itemStyle: {
                normal: {
                    color: '#453284'
                },
                emphasis: {
                    color: '#453284'
                }
            }
        }]
    }]
}


      myChart.setOption(option);
}
    function RightOne(){

var myChart = echarts.init(document.getElementById('LeiD'));
var color = ['#21fcd6', '#08c8ff', '#df4131', '#df4131','#715c28'];
var data = [{
        "name": "闯红灯",
        "value": 20
    },
    {
        "name": "闯禁行",
        "value": 30
    },
    {
        "name": "违停",
        "value": 22
    },
    {
        "name": "逆行",
        "value": 50
    },
    {
        "name": "超速",
        "value": 12
    }
];

var max = data[0].value;
data.forEach(function(d) {
    max = d.value > max ? d.value : max;
});

var renderData = [{
    value: [],
    // name: "告警类型TOP5",
    symbol: 'none',
    lineStyle: {
        normal: {
            color: '#ecc03e',
            width: 2
        }
    },
    areaStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                [{
                    offset: 0,
                    color: 'rgba(203, 158, 24, 0.8)'
                }, {
                    offset: 1,
                    color: 'rgba(190, 96, 20, 0.8)'
                }],
                false)
        }
    }
}];


data.forEach(function(d, i) {
    var value = ['', '', '', '', ''];
    value[i] = max,
    renderData[0].value[i] = d.value;
    renderData.push({
        value: value,
        symbol: 'circle',
        symbolSize: 12,
        lineStyle: {
            normal: {
                color: 'transparent'
            }
        },
        itemStyle: {
            normal: {
                color: color[i],
            }
        }
    })
})
var indicator = [];

data.forEach(function(d) {
    indicator.push({
        name: d.name,
        max: max,
        color: '#fff'
    })
})


 const option = {
    // backgroundColor: '#01193d',
    tooltip: {
        show: true,
        trigger: "item"
    },
    radar: {
        center: ["50%", "50%"],
        radius: "70%",
        startAngle: 90, // 起始角度
        splitNumber: 4,
        shape: "circle",
        splitArea: {
            // 背景色
            areaStyle: {
                color: 'transparent'
            }
        },
        axisLabel: {
            show: false,
            fontSize: 20,
            color: "#000",
            fontStyle: "normal",
            fontWeight: "normal"
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(255, 255, 255, 0.5)"
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(255, 255, 255, 0.5)"
            }
        },
        indicator: indicator
    },
    series: [{
        type: "radar",
        data: renderData
    }]
}

      myChart.setOption(option);
}
    function RightTwo(){

var myChart = echarts.init(document.getElementById('ReLi'));
var geoCoordMap = {
    "海门":[121.15,31.89],
    "鄂尔多斯":[109.781327,39.608266],
    "招远":[120.38,37.35],
    "舟山":[122.207216,29.985295],
    "齐齐哈尔":[123.97,47.33],
    "盐城":[120.13,33.38],
    "赤峰":[118.87,42.28],
    "青岛":[120.33,36.07],
    "乳山":[121.52,36.89],
    "金昌":[102.188043,38.520089],
    "泉州":[118.58,24.93],
    "莱西":[120.53,36.86],
    "日照":[119.46,35.42],
    "胶南":[119.97,35.88],
    "南通":[121.05,32.08],
    "拉萨":[91.11,29.97],
    "云浮":[112.02,22.93],
    "梅州":[116.1,24.55],
    "文登":[122.05,37.2],
    "上海":[121.48,31.22],
    "攀枝花":[101.718637,26.582347],
    "威海":[122.1,37.5],
    "承德":[117.93,40.97],
    "厦门":[118.1,24.46],
    "汕尾":[115.375279,22.786211],
    "潮州":[116.63,23.68],
    "丹东":[124.37,40.13],
    "太仓":[121.1,31.45],
    "曲靖":[103.79,25.51],
    "烟台":[121.39,37.52],
    "福州":[119.3,26.08],
    "瓦房店":[121.979603,39.627114],
    "即墨":[120.45,36.38],
    "抚顺":[123.97,41.97],
    "玉溪":[102.52,24.35],
    "张家口":[114.87,40.82],
    "阳泉":[113.57,37.85],
    "莱州":[119.942327,37.177017],
    "湖州":[120.1,30.86],
    "汕头":[116.69,23.39],
    "昆山":[120.95,31.39],
    "宁波":[121.56,29.86],
    "湛江":[110.359377,21.270708],
    "揭阳":[116.35,23.55],
    "荣成":[122.41,37.16],
    "连云港":[119.16,34.59],
    "葫芦岛":[120.836932,40.711052],
    "常熟":[120.74,31.64],
    "东莞":[113.75,23.04],
    "河源":[114.68,23.73],
    "淮安":[119.15,33.5],
    "泰州":[119.9,32.49],
    "南宁":[108.33,22.84],
    "营口":[122.18,40.65],
    "惠州":[114.4,23.09],
    "江阴":[120.26,31.91],
    "蓬莱":[120.75,37.8],
    "韶关":[113.62,24.84],
    "嘉峪关":[98.289152,39.77313],
    "广州":[113.23,23.16],
    "延安":[109.47,36.6],
    "太原":[112.53,37.87],
    "清远":[113.01,23.7],
    "中山":[113.38,22.52],
    "昆明":[102.73,25.04],
    "寿光":[118.73,36.86],
    "盘锦":[122.070714,41.119997],
    "长治":[113.08,36.18],
    "深圳":[114.07,22.62],
    "珠海":[113.52,22.3],
    "宿迁":[118.3,33.96],
    "咸阳":[108.72,34.36],
    "铜川":[109.11,35.09],
    "平度":[119.97,36.77],
    "佛山":[113.11,23.05],
    "海口":[110.35,20.02],
    "江门":[113.06,22.61],
    "章丘":[117.53,36.72],
    "肇庆":[112.44,23.05],
    "大连":[121.62,38.92],
    "临汾":[111.5,36.08],
    "吴江":[120.63,31.16],
    "石嘴山":[106.39,39.04],
    "沈阳":[123.38,41.8],
    "苏州":[120.62,31.32],
    "茂名":[110.88,21.68],
    "嘉兴":[120.76,30.77],
    "长春":[125.35,43.88],
    "胶州":[120.03336,36.264622],
    "银川":[106.27,38.47],
    "张家港":[120.555821,31.875428],
    "三门峡":[111.19,34.76],
    "锦州":[121.15,41.13],
    "南昌":[115.89,28.68],
    "柳州":[109.4,24.33],
    "三亚":[109.511909,18.252847],
    "自贡":[104.778442,29.33903],
    "吉林":[126.57,43.87],
    "阳江":[111.95,21.85],
    "泸州":[105.39,28.91],
    "西宁":[101.74,36.56],
    "宜宾":[104.56,29.77],
    "呼和浩特":[111.65,40.82],
    "成都":[104.06,30.67],
    "大同":[113.3,40.12],
    "镇江":[119.44,32.2],
    "桂林":[110.28,25.29],
    "张家界":[110.479191,29.117096],
    "宜兴":[119.82,31.36],
    "北海":[109.12,21.49],
    "西安":[108.95,34.27],
    "金坛":[119.56,31.74],
    "东营":[118.49,37.46],
    "牡丹江":[129.58,44.6],
    "遵义":[106.9,27.7],
    "绍兴":[120.58,30.01],
    "扬州":[119.42,32.39],
    "常州":[119.95,31.79],
    "潍坊":[119.1,36.62],
    "重庆":[106.54,29.59],
    "台州":[121.420757,28.656386],
    "南京":[118.78,32.04],
    "滨州":[118.03,37.36],
    "贵阳":[106.71,26.57],
    "无锡":[120.29,31.59],
    "本溪":[123.73,41.3],
    "克拉玛依":[84.77,45.59],
    "渭南":[109.5,34.52],
    "马鞍山":[118.48,31.56],
    "宝鸡":[107.15,34.38],
    "焦作":[113.21,35.24],
    "句容":[119.16,31.95],
    "北京":[116.46,39.92],
    "徐州":[117.2,34.26],
    "衡水":[115.72,37.72],
    "包头":[110,40.58],
    "绵阳":[104.73,31.48],
    "乌鲁木齐":[87.68,43.77],
    "枣庄":[117.57,34.86],
    "杭州":[120.19,30.26],
    "淄博":[118.05,36.78],
    "鞍山":[122.85,41.12],
    "溧阳":[119.48,31.43],
    "库尔勒":[86.06,41.68],
    "安阳":[114.35,36.1],
    "开封":[114.35,34.79],
    "济南":[117,36.65],
    "德阳":[104.37,31.13],
    "温州":[120.65,28.01],
    "九江":[115.97,29.71],
    "邯郸":[114.47,36.6],
    "临安":[119.72,30.23],
    "兰州":[103.73,36.03],
    "沧州":[116.83,38.33],
    "临沂":[118.35,35.05],
    "南充":[106.110698,30.837793],
    "天津":[117.2,39.13],
    "富阳":[119.95,30.07],
    "泰安":[117.13,36.18],
    "诸暨":[120.23,29.71],
    "郑州":[113.65,34.76],
    "哈尔滨":[126.63,45.75],
    "聊城":[115.97,36.45],
    "芜湖":[118.38,31.33],
    "唐山":[118.02,39.63],
    "平顶山":[113.29,33.75],
    "邢台":[114.48,37.05],
    "德州":[116.29,37.45],
    "济宁":[116.59,35.38],
    "荆州":[112.239741,30.335165],
    "宜昌":[111.3,30.7],
    "义乌":[120.06,29.32],
    "丽水":[119.92,28.45],
    "洛阳":[112.44,34.7],
    "秦皇岛":[119.57,39.95],
    "株洲":[113.16,27.83],
    "石家庄":[114.48,38.03],
    "莱芜":[117.67,36.19],
    "常德":[111.69,29.05],
    "保定":[115.48,38.85],
    "湘潭":[112.91,27.87],
    "金华":[119.64,29.12],
    "岳阳":[113.09,29.37],
    "长沙":[113,28.21],
    "衢州":[118.88,28.97],
    "廊坊":[116.7,39.53],
    "菏泽":[115.480656,35.23375],
    "合肥":[117.27,31.86],
    "武汉":[114.31,30.52],
    "大庆":[125.03,46.58]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push(geoCoord.concat(data[i].value));
        }
    }
    return res;
};

 const option = {
    title: {
        text: '热力图',
        subtext: '',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    // backgroundColor: '#404a59',
    visualMap: {
        min: 0,
        max: 500,
        splitNumber: 5,
        inRange: {
            color: ['#d94e5d','#eac736','#50a3ba'].reverse()
        },
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        zoom:2,
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#07163b',
                borderColor: '#0554b5'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series: [{
        name: 'AQI',
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: convertData([
            {name: "海门", value: 100},
            {name: "鄂尔多斯", value: 112},
            {name: "招远", value: 112},
            {name: "舟山", value: 112},
            {name: "齐齐哈尔", value: 114},
            {name: "盐城", value: 100},
            {name: "赤峰", value: 16},
            {name: "青岛", value: 450},
            {name: "乳山", value: 118},
            {name: "金昌", value: 119},
            {name: "泉州", value: 21},
            {name: "莱西", value: 300},
            {name: "日照", value: 121},
            {name: "胶南", value: 125},
            {name: "南通", value: 23},
            {name: "拉萨", value: 321},
            {name: "云浮", value: 444},
            {name: "梅州", value: 25},
            {name: "文登", value: 456},
            {name: "上海", value: 125},
            {name: "攀枝花", value: 125},
            {name: "威海", value: 25},
            {name: "承德", value: 25},
            {name: "厦门", value: 126},
            {name: "汕尾", value: 26},
            {name: "潮州", value: 247},
            {name: "丹东", value: 227},
            {name: "太仓", value: 427},
            {name: "曲靖", value: 327},
            {name: "烟台", value: 28},
            {name: "福州", value: 29},
            {name: "瓦房店", value: 30},
            {name: "即墨", value: 30},
            {name: "抚顺", value: 31},
            {name: "玉溪", value: 31},
            {name: "张家口", value: 31},
            {name: "阳泉", value: 31},
            {name: "莱州", value: 32},
            {name: "湖州", value: 32},
            {name: "汕头", value: 32},
            {name: "昆山", value: 33},
            {name: "宁波", value: 33},
            {name: "湛江", value: 33},
            {name: "揭阳", value: 34},
            {name: "荣成", value: 34},
            {name: "连云港", value: 35},
            {name: "葫芦岛", value: 35},
            {name: "常熟", value: 236},
            {name: "东莞", value: 336},
            {name: "河源", value: 36},
            {name: "淮安", value: 436},
            {name: "泰州", value: 236},
            {name: "南宁", value: 437},
            {name: "营口", value: 37},
            {name: "惠州", value: 337},
            {name: "江阴", value: 37},
            {name: "蓬莱", value: 37},
            {name: "韶关", value: 38},
            {name: "嘉峪关", value: 38},
            {name: "广州", value: 138},
            {name: "延安", value: 138},
            {name: "太原", value: 139},
            {name: "清远", value: 139},
            {name: "中山", value: 139},
            {name: "昆明", value: 139},
            {name: "寿光", value: 440},
            {name: "盘锦", value: 40},
            {name: "长治", value: 41},
            {name: "深圳", value: 41},
            {name: "珠海", value: 42},
            {name: "宿迁", value: 43},
            {name: "咸阳", value: 43},
            {name: "铜川", value: 44},
            {name: "平度", value: 44},
            {name: "佛山", value: 44},
            {name: "海口", value: 44},
            {name: "江门", value: 45},
            {name: "章丘", value: 45},
            {name: "肇庆", value: 46},
            {name: "大连", value: 47},
            {name: "临汾", value: 47},
            {name: "吴江", value: 47},
            {name: "石嘴山", value: 49},
            {name: "沈阳", value: 50},
            {name: "苏州", value: 50},
            {name: "茂名", value: 50},
            {name: "嘉兴", value: 51},
            {name: "长春", value: 51},
            {name: "胶州", value: 52},
            {name: "银川", value: 52},
            {name: "张家港", value: 52},
            {name: "三门峡", value: 53},
            {name: "锦州", value: 154},
            {name: "南昌", value: 154},
            {name: "柳州", value: 154},
            {name: "三亚", value: 154},
            {name: "自贡", value: 156},
            {name: "吉林", value: 156},
            {name: "阳江", value: 257},
            {name: "泸州", value: 157},
            {name: "西宁", value: 157},
            {name: "宜宾", value: 258},
            {name: "呼和浩特", value: 58},
            {name: "成都", value: 58},
            {name: "大同", value: 58},
            {name: "镇江", value: 59},
            {name: "桂林", value: 59},
            {name: "张家界", value: 59},
            {name: "宜兴", value: 59},
            {name: "北海", value: 60},
            {name: "西安", value: 61},
            {name: "金坛", value: 62},
            {name: "东营", value: 62},
            {name: "牡丹江", value: 63},
            {name: "遵义", value: 63},
            {name: "绍兴", value: 63},
            {name: "扬州", value: 64},
            {name: "常州", value: 64},
            {name: "潍坊", value: 65},
            {name: "重庆", value: 66},
            {name: "台州", value: 67},
            {name: "南京", value: 67},
            {name: "滨州", value: 70},
            {name: "贵阳", value: 71},
            {name: "无锡", value: 71},
            {name: "本溪", value: 71},
            {name: "克拉玛依", value: 72},
            {name: "渭南", value: 72},
            {name: "马鞍山", value: 72},
            {name: "宝鸡", value: 72},
            {name: "焦作", value: 75},
            {name: "句容", value: 75},
            {name: "北京", value: 79},
            {name: "徐州", value: 79},
            {name: "衡水", value: 80},
            {name: "包头", value: 80},
            {name: "绵阳", value: 80},
            {name: "乌鲁木齐", value: 84},
            {name: "枣庄", value: 84},
            {name: "杭州", value: 84},
            {name: "淄博", value: 85},
            {name: "鞍山", value: 86},
            {name: "溧阳", value: 86},
            {name: "库尔勒", value: 86},
            {name: "安阳", value: 190},
            {name: "开封", value: 390},
            {name: "济南", value: 292},
            {name: "德阳", value: 393},
            {name: "温州", value: 95},
            {name: "九江", value: 96},
            {name: "邯郸", value: 98},
            {name: "临安", value: 99},
            {name: "兰州", value: 99},
            {name: "沧州", value: 100},
            {name: "临沂", value: 103},
            {name: "南充", value: 104},
            {name: "天津", value: 105},
            {name: "富阳", value: 106},
            {name: "泰安", value: 112},
            {name: "诸暨", value: 112},
            {name: "郑州", value: 113},
            {name: "哈尔滨", value: 114},
            {name: "聊城", value: 116},
            {name: "芜湖", value: 117},
            {name: "唐山", value: 119},
            {name: "平顶山", value: 119},
            {name: "邢台", value: 119},
            {name: "德州", value: 120},
            {name: "济宁", value: 120},
            {name: "荆州", value: 127},
            {name: "宜昌", value: 130},
            {name: "义乌", value: 132},
            {name: "丽水", value: 133},
            {name: "洛阳", value: 134},
            {name: "秦皇岛", value: 136},
            {name: "株洲", value: 143},
            {name: "石家庄", value: 147},
            {name: "莱芜", value: 148},
            {name: "常德", value: 152},
            {name: "保定", value: 153},
            {name: "湘潭", value: 154},
            {name: "金华", value: 157},
            {name: "岳阳", value: 169},
            {name: "长沙", value: 175},
            {name: "衢州", value: 177},
            {name: "廊坊", value: 193},
            {name: "菏泽", value: 194},
            {name: "合肥", value: 229},
            {name: "武汉", value: 273},
            {name: "大庆", value: 279}
        ])
    }]
};

      myChart.setOption(option);
}
    function RightThere(){

var myChart = echarts.init(document.getElementById('Ren'));
var spirit = 'image://';
const option = {
  tooltip: {},
  xAxis: {
    max: 2000,
    splitLine: {
      show: false
    },
    offset: 10,
    axisLine: {
      lineStyle: {
        color: "#999"
      },
    
    },
    axisLabel: {
      margin: 10
    }
  },
  yAxis: {
    data: ["临汾", "忻州", "运城", "大同",'朔州'],
    label:{
        color:'#fff'
      },
    inverse: true,
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisLabel: {
      margin: 10,
      color: "#999",
      fontSize: 16
    }
  },
  grid: {
    top: "center",
    height: 200,
    left: 70,
    right: 100
  },
  series: [{
    type: "pictorialBar",
  
    symbol: 'image://',
    symbolRepeat: "fixed",
    symbolMargin: "5%",
    symbolClip: true,
    symbolSize: 20,
    symbolBoundingData: 2000,
    data: [891, 1220, 660, 1670,400],
    z: 10
  }]
}


      myChart.setOption(option);
}
</script>

</html>